import { Button, Card, Input, Layout, Spin, Tree, message } from "antd";
import React from "react";
import styles from "./index.less"
import { memDeptTree } from "@/services/aigcUser";
const { Header, Footer, Sider, Content } = Layout;
import CustomDockData from "./customDockData";
import ThirdSyncData from "./thirdSyncData";
import { doCancelSync, getFullSyncStatus } from "@/services/user";

let checkInterval = null
class DataPage extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      leftLoading:false,
      selectedKeys:[],
      expandedKeys:[],
      currentNode:{},
      loading:true,
      leftData:[],
      search:"",
      current:1,
      size:10,
      total:0,
      list:[],
      syncLoading:false,
      globalLoading:false
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  //获取同步状态
  checkSyncStatus = async (showMessage) => {
    const res = await getFullSyncStatus()
    switch (res.data) {
      case '0':
        //未同步
        this.getTreeData()
        this.toggleGlobalLoading(false)
        clearInterval(checkInterval)
        checkInterval = null
        break;
      case '1':
        //同步中
        this.toggleGlobalLoading(true)
        if (!checkInterval) {
          checkInterval = setInterval(() => {
            this.checkSyncStatus()
          }, 5000)
        }
        break;
      case '2':
        //同步成功
        this.toggleGlobalLoading(false)
        this.getTreeData()
        message.info('同步成功')
        clearInterval(checkInterval)
        checkInterval = null
        break;
      case '3':
        //同步失败
        this.toggleGlobalLoading(false)
        this.getTreeData()
        message.info('同步失败')
        clearInterval(checkInterval)
        checkInterval = null
        break;
    }
  }

  toggleGlobalLoading = flag => {
    this.setState({
      globalLoading: flag
    })
  }

  //获取树信息
  getTreeData = (flag) => {
    this.setState({
      leftLoading:true
    },async () => {
      const res = await memDeptTree()
      this.setState({
        leftLoading:false,
        leftData:res ? res : [],
      },() => {
        this.setState({
          currentNode:res && res[0] ? res[0] : {},
          expandedKeys:res && res[0] ? [res[0].id] : [],
          selectedKeys:res && res[0] ? [res[0].id] : [],
        },() => {
          this.CustomDockData.doSearch(1,10)
        })
      })
    })
  }

  onSelect = (selectedKeys,e) => {
    this.setState({
      currentNode:{...e.node.props,id:e.node.props.eventKey},
      selectedKeys:[e.node.props.eventKey]
    },() => {
      this.CustomDockData.doSearch(1,10)
    })
  }

  onExpand = expandedKeys => {
    this.setState({
      expandedKeys
    })
  }

  cancelSync = async () => {
    const res = await doCancelSync()
    message.info(res.data)
    this.checkSyncStatus()
  }

  render(){
    const { 
      leftLoading,
      selectedKeys,
      expandedKeys,
      leftData,
      search,
      list,
      current,
      size,
      total,
      syncLoading,
      currentNode,
      globalLoading
    } = this.state;
    const { settingInfo,toSettingPage,history } = this.props;
    const renderTreeTitle = item =>  (
      <div 
        className={currentNode.id == item.id ? `${styles.treeNameBox} ${styles.treeNameSelect}` : `${styles.treeNameBox}`}
      >
        <div className={styles.treeName} title={item.name}>{item.name}</div>
      </div>
    )
    const renderTreeNode = data => data.map(item => 
      item.children && item.children.length > 0 ? (
        <Tree.TreeNode
          title={renderTreeTitle(item)} 
          key={item.id}
          treeName={item.name}
        >
          {renderTreeNode(item.children)}
        </Tree.TreeNode>
      ) : (
        <Tree.TreeNode
          title={renderTreeTitle(item)} 
          key={item.id} 
          treeName={item.name}
        />
        
      )
    )
    return (
      <Spin spinning={globalLoading} wrapperClassName={styles.globalSpin}
      tip={
        <div>
          <p>通讯录正在同步，请稍等...</p>
          <Button onClick={this.cancelSync} type="primary" size="small">取消同步</Button>
        </div>
      }>
        <Layout style={{height:"100%"}} className={styles.memberCard}>
          <Sider theme="light" width={300} style={{background:"#ffffff",borderRadius:"6px 0 0 6px",borderRight:"1px solid #E7E7E7",padding:10}}>
            <Spin spinning={leftLoading}>
              <Tree
                showIcon={false}
                defaultExpandAll
                onSelect={this.onSelect}
                selectedKeys={selectedKeys}
                expandedKeys={expandedKeys}
                onExpand={this.onExpand}
              >
                {renderTreeNode(leftData)}
              </Tree>
            </Spin>
          </Sider>
          <Content style={{background:"#ffffff",borderRadius:"0 6px 6px 0",padding:22}}>
            <CustomDockData 
              onRef={ref => this.CustomDockData = ref} 
              toSetting={toSettingPage}
              history={history}
              currentNode={currentNode}
              settingInfo={settingInfo}
              initTree={this.getTreeData}
              checkSyncStatus={this.checkSyncStatus}
            />
          
          </Content>
        </Layout>
      </Spin>
    )
  }
}

export default DataPage